<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">标签管理</div>
        <div>
          <el-button type="success" @click="addTags">添加标签</el-button>
          <el-input
            @input="inputSearchTagName"
            clearable
            v-model="pageparm.name"
            placeholder="请输入"
            style="width: 250px; "
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <el-table :data="tableData">
        <el-table-column width="80" prop="id" label="ID" align="center">
        </el-table-column>
        <el-table-column prop="labelName" align="center" label="标签名">
          <template slot-scope="scope">
            <el-tag
              size="small"
              :style="{ borderColor: scope.row.labelColor }"
              :color="scope.row.labelColor"
              effect="dark"
              >{{ scope.row.labelName }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="labelColor" label="颜色" align="center">
        </el-table-column> -->
        <el-table-column prop="createTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" width="180" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="updateCurrentTag(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    <el-dialog :title="currntTitle" :visible.sync="dialogVisible" width="25%">
      <el-form label-width="100px" :model="tagForm">
        <el-form-item label="标签名：">
          <el-input
            placeholder="请输入标签名"
            v-model="tagForm.labelName"
            maxlength="25"
          ></el-input>
        </el-form-item>
        <el-form-item label="标签颜色：">
          <div style="display: flex;">
            <el-color-picker
              v-model="tagForm.labelColor"
              :disabled="tagForm.labelName == ''"
              show-alpha
              :predefine="predefineColors"
              @change="setColor"
            >
            </el-color-picker>
            <div style="margin-left: 10px; margin-top: 10px;">
              <span style="color: #bb6d6d;font-weight: 700;font-size: 10px;"
                >提示:</span
              >
              <span style="font-size: 10px; color: #999;">
                请输入标签名后选择标签颜色！</span
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="tagForm.labelName" label="推荐标签：">
          <el-tag
            size="small"
            v-for="item in tagItems"
            :key="item.color"
            :color="item.color"
            style="margin: 0 5px;"
            :style="{ borderColor: item.color }"
            effect="dark"
            @click="getTagsColor(item.color)"
          >
            <span> {{ tagForm.labelName }}</span>
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="tagForm.labelColor && tagForm.labelName"
          label="效果展示："
        >
          <el-tag
          size="small"
            :disable-transitions="true"
            :color="tagForm.labelColor"
            :style="{ borderColor: tagForm.labelColor }"
            effect="dark"
          >
            {{ tagForm.labelName }}
          </el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTag">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import {
  getTagList,
  addTag,
  updateTag,
  getTagById,
  deleteTagById
} from "../../api/tag";
export default {
  data() {
    return {
      tagForm: {
        labelColor: "",
        labelName: ""
      },
      tableData: [],
      dialogVisible: false,
      pageparm: {
        pageIndex: 1,
        size: 10,
        total: 0,
        name: ""
      },
      currntTitle: "",
      // 默认颜色
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ],
      // 推荐标签颜色
      tagItems: [
        { color: "#409eff" },
        { color: "#67c23a" },
        { color: "#909399" },
        { color: "#f56c6c" },
        { color: "#e6a23c" }
      ]
    };
  },
  name: "tag",
  components: { Pagination },
  created() {
    this.getTagPageList();
  },
  methods: {
    //查询
    inputSearchTagName(v) {
      this.getTagPageList(v);
    },

    // 新增标签
    addTags() {
      this.dialogVisible = true;
      this.tagForm = {
        labelColor: "",
        labelName: ""
      };
      this.currntTitle = "新增标签";
    },

    // 获取标签列表
    async getTagPageList(v) {
      this.pageparm.name = v ? v : "";
      let result = await getTagList(this.pageparm);
      if (result.code == 200 && result.data) {
        const { items, totalCount } = result.data;
        this.tableData = items;
        this.pageparm.total = totalCount;
      } else {
        this.tableData = [];
      }
    },

    // 根据标签id获取详情数据
    async getTagDetaliById(id) {
      let result = await getTagById(id);
      if (result.code == 200) {
        const { labelColor, labelName, id } = result.data;
        this.tagForm = { labelColor, labelName, id };
        this.dialogVisible = true;
        this.currntTitle = "编辑标签";
      }
    },

    // 编辑 新增标签提交按钮
    async submitTag() {
      if (this.tagForm.labelName == "" || this.tagForm.labelColor == "") {
        this.$message.warning("标签名和颜色都是必填项!");
        return;
      }
      let result = {};
      if (this.currntTitle == "新增标签") {
        result = await addTag(this.tagForm);
      } else {
        result = await updateTag(this.tagForm);
      }
      if (result.code == 200) {
        this.$message.success(
          `${this.currntTitle == "新增标签" ? "新增成功" : "编辑成功"}`
        );
        this.dialogVisible = false;
        this.getTagPageList();
      }
    },

    //删除
    handleDelete(id) {
      this.$confirm("确定删除吗？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定删除",
        cancelButtonText: "取消"
      })
        .then(() => {
          deleteTagById(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.getTagPageList();
            } else {
              this.$message.error("删除失败");
              this.getTagPageList();
            }
          });
        })
        .catch(action => {
          this.$message.info("取消删除");
        });
    },

    updateCurrentTag(id) {
      this.getTagDetaliById(id);
    },

    //选择标签的颜色
    setColor(c) {
      this.tagForm.labelColor = c;
    },

    getTagsColor(c) {
      this.tagForm.labelColor = c;
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.size = parm.size;
      this.getTagPageList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 85vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}

.active {
  color: rgb(124, 134, 244) !important;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-input {
  max-width: 200px;
}

.sex {
  display: flex;
  align-items: center;
  align-items: center;
  // margin: 10px 20px 20px 0;
}

/deep/.el-color-dropdown,
.el-color-picker__panel {
  // transform-origin: center top;
  z-index: 2053 !important;
  position: fixed !important;
  top: 330px !important;
  right: 51px !important;
}

.list-w {
  display: flex;
  align-items: center;
}
</style>
